<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.parent{
			width: 700px;
			height: 700px;
			border: 1px solid #555;
			margin: 0 auto;
			display: flex;
			/* 设置主轴方向 */
			flex-direction: row;
			/* 主轴内容分布	 */
			justify-content: space-evenly;
			/* 侧轴内容分布 */
			align-items: center;
			/* 侧轴多行内容分布 */
			align-content: center;
			/* 换行 */
			flex-wrap: wrap;
		}
		.child{
			width: 200px;
			height: 200px;
		}
		.child:nth-child(1){
			background-color: rgb(151, 215, 240);
			order: 4;
		}
		.child:nth-child(2){
			background-color: rgb(195, 235, 135);
			order: 6;
		}
		.child:nth-child(3){
			background-color: rgb(228, 202, 163);
			order: 5;
		}
		.child:nth-child(4){
			background-color: rgb(133, 133, 247);
			order: 3;
		}
		.child:nth-child(5){
			background-color: rgb(235, 235, 134);
			order: 2;
		}
		.child:nth-child(6){
			background-color: rgb(135, 218, 221);
						/* 单独设置侧轴的内容排布 */
			align-self: flex-end;
			/* 排序 */
			order: 1;
		}
	</style>
</head>

<body>
		<div class="parent">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>
			<div class="child">4</div>
			<div class="child">5</div>
			<div class="child">6</div>
		</div>
</body>

</html>